<template>
    <div id="Home">
        <div class="Home_left Home_item">
            <div class="item_card">
                <div class="card_title">
                    <span :class="dev_show == 1 ? 'activate' : 'inactive'" @click="changeDev(1)">设备分布</span>
                    <span :class="sen_show == 1 ? 'activate' : 'inactive'" @click="changeDev(2)">测点分布</span>
                </div>
                <div class="chart" ref="device_sensor"></div>
            </div>
            <div class="item_card">
                <div class="card_title">告警与工单</div>
                <div class="chart" ref="curve"></div>
            </div>
            <div class="item_card">
                <div class="card_title">设备数据</div>
                <button class="chart_btn" @click="toDevice">查看</button>
                <div class="chart chart_table">
                    <table border="1" class="deviceTable">
                        <thead>
                            <tr>
                                <th>工厂名称</th>
                                <th>设备总数</th>
                                <th>告警总数</th>
                                <th>工单总数</th>
                                <th>测点总数</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in deviceData" :key="item.id" @click="toFactoryDel(item.id)">
                                <td>{{ item.factory_name }}</td>
                                <td>{{ item.device_num }}</td>
                                <td>{{ item.warn_num }}</td>
                                <td>{{ item.order_num }}</td>
                                <td>{{ item.sensor_num }}</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="noData" v-show="deviceData.length == 0">暂无数据</div>
                </div>
            </div>
        </div>
        <div class="Home_map">
            <div class="map_header">
                <div class="map_header_item">
                    <div class="item_right">
                        <span class="num">{{ stats.factory_num }}</span>
                        <span class="title">区域总数</span>
                    </div>
                </div>
                <div class="map_header_item">
                    <div class="item_right">
                        <span class="num">{{ stats.device_num }}</span>
                        <span class="title">设备总数</span>
                    </div>
                </div>
                <div class="map_header_item">
                    <div class="item_right">
                        <span class="num">{{ stats.sensor_num }}</span>

                        <span class="title">测点总数</span>
                    </div>
                </div>

                <div class="map_header_item">
                    <div class="item_right">
                        <span class="num">{{ stats.order_total }}</span>
                        <span class="title">工单总数</span>
                    </div>
                </div>
            </div>
            <div class="map_content">
                <div class="map_bottom"></div>
                <div class="map_s">
                    <div class="map_chart" ref="map_chart"></div>
                    <div class="map_item1"></div>
                    <div class="map_item2"></div>
                </div>
            </div>
        </div>
        <div class="Home_right Home_item">
            <div class="item_card">
                <div class="card_title">告警设备</div>
                <div class="chart">
                    <div class="alarm_total">
                        <div class="alarm_data">
                            {{ stats.warn_total }}
                            <span style="color: white; font-size: 16px; font-weight: 300">件</span>
                        </div>
                        <div class="alarm_title">总数</div>
                    </div>
                    <div class="alarm_items">
                        <div class="alarm_item" @click="toAlarm(3)">
                            <span style="color: red; font-size: 22px" class="flashing">{{ stats.level_3 }}</span>
                            严重告警
                        </div>
                        <div class="alarm_item alarm_item1" @click="toAlarm(2)">
                            <span style="color: #fac328; font-size: 22px">{{ stats.level_2 }}</span>
                            中等告警
                        </div>
                        <div class="alarm_item" @click="toAlarm(1)">
                            <span style="color: #2b9d4a; font-size: 22px">{{ stats.level_1 }}</span>
                            一般告警
                        </div>
                    </div>
                </div>
            </div>
            <div class="item_card">
                <div class="card_title">工单统计</div>
                <div class="chart">
                    <div class="box" @click="toOrder()" style="position: absolute; top: 0; left: 0%; width: 50%; height: 94%" ref="echarts"></div>
                    <div class="alarm_items" style="right: 0">
                        <div class="alarm_item" @click="toOrder(3)">
                            <span style="color: #2b9d4a; font-size: 22px">{{ stats.handled }}</span>
                            已处理
                        </div>
                        <div class="alarm_item alarm_item1" @click="toOrder(2)">
                            <span style="color: #fac328; font-size: 22px">{{ stats.unHandled }}</span>
                            未处理
                        </div>
                    </div>
                </div>
            </div>
            <div class="item_card">
                <div class="card_title">近期告警</div>
                <button class="chart_btn" @click="toAlarm(0)">查看</button>
                <div class="chart chart_table">
                    <table border="1" class="alarmTable">
                        <thead>
                            <tr>
                                <th>告警类型</th>
                                <th>所属设备</th>
                                <th>告警等级</th>
                                <th>时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in recentAlarm" :key="item.id" @click="toDeviceDel(item)">
                                <td>{{ item.title }}</td>
                                <td>{{ item.device_name }}</td>
                                <td v-html="item.warn_level"></td>
                                <td>{{ item.create_time }}</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="noData" v-show="recentAlarm.length == 0">暂无数据</div>
                </div>
            </div>
        </div>
        <div class="chat Home_item" v-show="false">
            <div class="item_card">
                <div class="card_title">工业AI助手</div>
                <div class="chat_box">
                    <div class="msgs">
                        <div class="row" v-for="(t, i) in msgs" :key="i">
                            <div class="msg_left" v-if="t.type == 'answer'">
                                <div class="avatar"></div>
                                <div class="content">
                                    <div class="time">小智 {{ t.time }}</div>
                                    <div class="msg" v-text="t.msg"></div>
                                    <div class="tips" v-if="t.tips.length > 0">
                                        <div style="color: #33e6ff">你是要问以下问题吗？</div>
                                        <ul>
                                            <li v-for="(t, i) in t.tips" v-text="t.title" :key="i"></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="msg_right" v-if="t.type == 'ask'">
                                <div class="content">
                                    <div class="time">我 {{ t.time }}</div>
                                    <div class="msg" v-text="t.msg"></div>
                                </div>
                                <div class="avatar"></div>
                            </div>
                        </div>
                    </div>
                    <div class="input_box">
                        <textarea maxlength="250" rows="8" style=""></textarea>
                        <div class="btn_enter">发送</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill'
import chinaMap from '@/plugins/mapjson/china.json'
import city1 from '@/plugins/mapjson/citys/532500.json'
import { requestApi } from '@/requset/api'
import { mapConfig, mapConfig2 } from './config'
import { deepClone } from '@/plugins/clone'
export default {
    data() {
        return {
            // 地图数据
            mapArr: [],
            sen_show: 1,
            dev_show: 0,
            sensor_device_data: {
                sen_data: [], //测点分布
                dev_data: [], //设备分布
            },
            stats: {},
            // 设备数据，地图
            deviceData: [],
            // 近期告警
            recentAlarm: [],
            //新增告警 与 工单
            newData: [],
            msgs: [],
            userLevel: null,
            chinaChart: null,
        }
    },
    methods: {
        //绘制设备或测点分布图
        draw_device_sensor(data) {
            if (data && data.length != 0) {
                var myChart = echarts.init(this.$refs.device_sensor, 'light')
                var option = {
                    title: {
                        name: '测点',
                    },
                    tooltip: {
                        trigger: 'item',
                    },
                    legend: {
                        orient: 'vertical',
                        top: '0%',
                        left: '7%',
                        textStyle: {
                            color: '#fff',
                        },
                        type: 'scroll',
                    },
                    series: [
                        {
                            //   name: '不同分工厂的设备占比',
                            type: 'pie',
                            radius: ['55%', '70%'],
                            center: ['62%', '44%'],

                            avoidLabelOverlap: true,
                            label: {
                                show: true,
                                color: 'white',
                                position: 'inside',
                                width: 240,
                                overflow: 'break',
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '16',
                                    fontWeight: 'bold',
                                },
                            },
                            labelLine: {
                                show: true,
                            },
                            data,
                        },
                    ],
                }

                this.pie_shuffling(option, myChart)
                myChart.setOption(option)
                window.addEventListener('resize', function () {
                    myChart.resize()
                })
            }
        },
        //饼图轮播
        pie_shuffling(option, myChart) {
            /**实现饼图轮播 */
            let currentIndex = -1 // 当前高亮图形在饼图数据中的下标
            let Carousel_time = 2000 //轮播时间
            myChart.changePieInterval = setInterval(selectPie, Carousel_time) // 设置自动切换高亮图形的定时器
            function highlightPie() {
                // 取消所有高亮并高亮当前图形
                // 遍历饼图数据，取消所有图形的高亮效果
                for (var idx in option.series[0].data)
                    myChart.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0,
                        dataIndex: idx,
                    })
                // 高亮当前图形
                myChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: currentIndex,
                })
            }

            myChart.on('mouseover', (params) => {
                // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形
                clearInterval(myChart.changePieInterval)
                currentIndex = params.dataIndex
                highlightPie()
            })

            myChart.on('mouseout', (params) => {
                // 用户鼠标移出时，重新开始自动切换
                if (myChart.changePieInterval) clearInterval(myChart.changePieInterval)
                myChart.changePieInterval = setInterval(selectPie, 2000)
            })

            function selectPie() {
                // 高亮效果切换到下一个图形
                var dataLen = option.series[0].data.length
                currentIndex = (currentIndex + 1) % dataLen
                highlightPie()
            }
            /**实现饼图轮播 */
        },
        china_shuff(option, myChart) {
            var defaultSymbolSize = 40
            var defaultColor = '#2515D2'
            var defaultLabelShow = false
            var highlightSymbolSize = 80
            var highlightColor = '#2515D2'
            var highlightLabelShow = true

            var series = option.series[0]

            // 设置散点的默认样式
            series.symbolSize = defaultSymbolSize
            series.itemStyle = {
                normal: {
                    color: defaultColor,
                },
            }
            series.label = {
                normal: {
                    show: defaultLabelShow,
                },
            }

            var currentIndex = 0

            function a() {
                // 检查数据是否存在且不为空
                if (!series.data || !Array.isArray(series.data) || series.data.length === 0) {
                    return
                }

                // 恢复默认样式
                series.data.forEach(function (item) {
                    if (item) {
                        item.symbolSize = defaultSymbolSize
                        item.itemStyle = {
                            normal: {
                                color: defaultColor,
                            },
                        }
                        item.label = {
                            normal: {
                                show: defaultLabelShow,
                            },
                        }
                    }
                })

                // 高亮展示当前项
                var dataIndex = currentIndex % series.data.length
                var currentItem = series.data[dataIndex]
                
                // 确保currentItem存在再设置属性
                if (currentItem) {
                    currentItem.symbolSize = highlightSymbolSize
                    currentItem.itemStyle = {
                        normal: {
                            color: highlightColor,
                        },
                    }
                    currentItem.label = {
                        normal: {
                            show: highlightLabelShow,
                        },
                    }
                    // 更新图表
                    myChart.setOption(option)
                }
                // 更新索引
                currentIndex++
            }
            if (series.data && series.data.length > 0) {
                myChart.timer = setInterval(a, 2000) // 每 2 秒轮播一次
            }
            // 监听鼠标移入移出事件
            // myChart.getZr().on('mouseover', () => {
            //     if (myChart.timer) clearInterval(myChart.timer) // 停止轮播
            //     myChart.timer = null
            // })

            // myChart.getZr().on('mouseout', () => {
            //     // startCarousel() // 继续轮播
            //     myChart.timer = setInterval(a, 2000)
            // })
        },
        //绘制中间地图
        drawChinaMap() {
            this.$nextTick(() => {
                this.chinaChart = echarts.init(this.$refs.map_chart)
                let map = 'china2'
                let user_id = sessionStorage.getItem('user_id')
                if (user_id >= 1000) {
                    echarts.registerMap(map, city1)
                } else echarts.registerMap(map, chinaMap)

                var option = deepClone(mapConfig2)
                option.geo.map = map
                if (this.mapArr && this.mapArr.length > 0) {
                    option.series[0].data = this.mapArr
                } else {
                    option.series[0].data = []
                }
                var that = this
                this.chinaChart.on('click', (params) => {
                    let id = params.data.id
                    that.$router.push('/index/factorydetails?id=' + id)
                })
                this.chinaChart.setOption(option)
                this.china_shuff(option, this.chinaChart)
                window.addEventListener('resize', () => {
                    this.chinaChart.resize()
                })
            })
        },
        // 告警和工单 曲线图
        drawCurve() {
            let myChart = echarts.init(this.$refs.curve, 'light')
            let dataX = [],
                dataWarn = [],
                dataOrder = []
            this.newData.forEach((e) => {
                dataX.push(e.time)
                dataWarn.push(e.warn_num)
                dataOrder.push(e.order_num)
            })
            let option = {
                color: ['#00f2f1', '#E33E31'],
                legend: {
                    data: ['新增告警', '新增工单'],
                    right: '10%',
                    // 修饰图例文字的颜色
                    textStyle: {
                        color: '#4c9bfd',
                    },
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: dataX,
                    // name: "日期",
                    nameTextStyle: {
                        fontWeight: 600,
                        fontSize: 18,
                    },
                    axisTick: {
                        show: false,
                    },
                    // 修饰刻度标签的颜色
                    axisLabel: {
                        color: 'rgba(255,255,255,.7)',
                    },
                    // 去除x坐标轴的颜色
                    axisLine: {
                        show: false,
                    },
                },
                yAxis: {
                    type: 'value',
                    // name: "纵轴名称",
                    minInterval: 1,
                    nameTextStyle: {
                        fontWeight: 600,
                        fontSize: 18,
                        color: 'red',
                    },
                    axisTick: {
                        show: false,
                    },
                    // 修饰刻度标签的颜色
                    axisLabel: {
                        color: 'rgba(255,255,255,.7)',
                    },
                    // 修改y轴分割线的颜色
                    splitLine: {
                        lineStyle: {
                            color: '#012f4a',
                        },
                    },
                },
                // tooltip，鼠标放到折线图上展示的数据展示样式
                tooltip: {
                    trigger: 'axis',
                },
                series: [
                    { name: '新增告警', data: dataWarn, type: 'line', smooth: true },
                    { name: '新增工单', data: dataOrder, type: 'line', smooth: true },
                ],
                grid: {
                    top: '20%',
                    left: '3%',
                    right: '4%',
                    bottom: '4%',
                    show: true,
                    borderColor: '#012f4a',
                    containLabel: true,
                },
            }
            myChart.setOption(option)
            window.addEventListener('resize', function () {
                myChart.resize()
            })
        },
        //跳转设备页面
        toDevice() {
            this.$router.push('/index/devicemang/device')
        },
        toOrder(status) {
            // console.log('status', status)
            if (status) var url = `/index/expdig/notice?status=${status}`
            else var url = `/index/expdig/notice`
            console.log('url', url)

            this.$router.push(url)
        },
        toAlarm(level) {
            if (level) this.$router.push('/index/expdig/warn?warn_level=' + level)
            else this.$router.push('/index/expdig/warn')
        },
        toFactoryDel(id) {
            this.$router.push('/index/factorydetails?id=' + id)
        },
        toDeviceDel(val) {
            let { device_id, sensor_id, create_time, key } = val
            this.$router.push(`/index/expdig/diagnosis?device_id=${device_id}&time=${create_time}&sensor_id=${sensor_id}&key=${key}`)
        },
        // 设备 、测点分布切换
        changeDev(flag) {
            var myChart = echarts.init(this.$refs.device_sensor, 'light')
            // 清除 存在的定时器
            clearInterval(myChart.changePieInterval)
            myChart.clear()
            if (flag == 2) {
                this.dev_show = 0
                this.sen_show = 1
                this.draw_device_sensor(this.sensor_device_data.sen_data)
            } else if (flag == 1) {
                this.dev_show = 1
                this.sen_show = 0
                this.draw_device_sensor(this.sensor_device_data.dev_data)
            }
        },
        // 数据统计
        indexStats() {
            requestApi('post', 'index/stats', {}, true).then((res) => {
                const { code, data } = res.data
                if (code === 0) {
                    const [statsData] = data
                    this.stats = { ...statsData }
                    this.draw()
                }
            })
        },
        // 设备分布
        indexDeviceDistribution() {
            requestApi('get', 'index/device/distribution', null, true).then((res) => {
                if (res.data.code == 0) {
                    this.sensor_device_data.dev_data = res.data.data
                }
            })
        },
        // 测点分布
        indexSensorDistribution() {
            requestApi('get', 'index/sensor/distribution', null, true).then((res) => {
                if (res.data.code == 0) {
                    this.sensor_device_data.sen_data = res.data.data
                    this.draw_device_sensor(this.sensor_device_data.sen_data)
                }
            })
        },
        // 获取设备数据，地图展示
        indexDeviceData() {
            requestApi('get', 'index/device/data', null, true).then((res) => {
                if (res.data.code == 0) {
                    this.deviceData = res.data.data
                    this.mapArr = this.deviceData.map((e) => {
                        return {
                            id: e.id,
                            name: e.city,
                            value: [e.city_longitude, e.city_latitude, e.factory_name, e.device_num, e.order_num, e.warn_num],
                        }
                    })
                }
                this.drawChinaMap()
            })
        },
        // 获取新增告警与工单
        indexNewdata() {
            requestApi('get', 'index/newdata', null, false).then((res) => {
                if (res.data.code == 0) {
                    this.newData = res.data.data.reverse()
                    // 获取告警与工单数据后，绘制曲线图
                    this.drawCurve()
                }
            })
        },
        // 近期告警
        indexRecentAlarm() {
            requestApi('post', 'index/recent/alarm', {}, true).then((res) => {
                let moment = require('moment')
                if (res.data.code == 0) {
                    let a = res.data.data

                    a.forEach((e) => {
                        e.create_time = moment(new Date(e.create_time)).format('YYYY-MM-DD HH:mm:ss')
                        let level = e.warn_level
                        if (level == 1) e.warn_level = `<span style="color:#31e1d9;">一般</span>`
                        else if (level == 2) e.warn_level = `<span style="color:#FAC222;">中等</span>`
                        else e.warn_level = `<span style="color:#F85726;">严重</span>`
                        try {
                            e.key = e.content.split('|')[e.content.split('|').length - 1]
                        } catch (error) {
                            e.key = ''
                        }
                    })
                    this.recentAlarm = a
                }
            })
        },
        // 绘制工单统计 图
        draw() {
            this.$nextTick(() => {
                var myChart = echarts.init(this.$refs.echarts)
                if (this.stats.order_total == 0) {
                    var value = 0
                } else {
                    var value = this.stats.handled / this.stats.order_total
                }
                var option = {
                    backgroundColor: '#0F224C',
                    title: [
                        {
                            text: '工单处理率',
                            x: 'center',
                            y: '70%',
                            textStyle: {
                                fontSize: 16,
                                fontWeight: '600',
                                color: '#5dc3ea',
                                lineHeight: 16,
                                textAlign: 'center',
                            },
                        },
                    ],
                    series: [
                        {
                            type: 'liquidFill',
                            radius: '54%',
                            center: ['50%', '38%'],
                            color: [
                                {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: '#446bf5',
                                        },
                                        {
                                            offset: 1,
                                            color: '#2ca3e2',
                                        },
                                    ],
                                    globalCoord: false,
                                },
                            ],
                            data: [value], // data个数代表波浪数
                            backgroundStyle: {
                                borderWidth: 1,
                                color: 'RGBA(51, 66, 127, 0.7)',
                            },
                            label: {
                                normal: {
                                    textStyle: {
                                        fontSize: 20,
                                        color: '#fff',
                                    },
                                },
                            },
                            outline: {
                                // show: false
                                borderDistance: 0,
                                itemStyle: {
                                    borderWidth: 2,
                                    borderColor: '#112165',
                                },
                            },
                        },
                    ],
                }
                myChart.setOption(option)
                window.addEventListener('resize', function () {
                    myChart.resize()
                })
            })
        },
    },
    filters: {
        orderPer(total, part) {
            if (total == 0) return 0
            else return ((part / total) * 100).toFixed(2)
        },
    },

    mounted() {},
    created() {
        this.indexStats()
        this.indexDeviceDistribution()
        this.indexSensorDistribution()
        this.indexDeviceData()
        this.indexNewdata()
        this.indexRecentAlarm()
        this.userLevel = sessionStorage.getItem('userLevel')
        this.user_id = sessionStorage.getItem('user_id')
    },
    beforeDestroy() {
        if (this.chinaChart.timer) clearInterval(this.chinaChart.timer) // 在组件销毁之前清除定时器
    },
}
</script>

<style scoped lang="less">
@keyframes App-logo-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes App-logo-spin1 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

#Home {
    height: 100%;
    overflow: hidden;
    width: 100%;
    display: flex;
    justify-content: space-between;

    .Home_map {
        height: 100%;
        width: 48%;

        .map_header {
            height: 12%;
            width: 96%;
            margin-top: 2%;
            margin-left: 2%;
            display: flex;
            justify-content: space-around;

            .map_header_item {
                width: 48%;
                height: 100%;
                // background-color: pink;
                display: flex;
                justify-content: space-around;

                // background-color: red;
                .item_right {
                    // width: 160px;
                    height: 100%;
                    background-image: url(../../assets/Home/Home_item_bg1.png);
                    background-size: 100% 100%;
                    position: relative;
                    flex-grow: 1;
                    color: #00e4ff;

                    .num {
                        position: absolute;
                        left: 50%;
                        top: 40%;
                        transform: translate(-50%, -50%);
                        font-size: 46px;
                        font-family: 'UnidreamLED';
                    }

                    .title {
                        position: absolute;
                        left: 50%;
                        font-size: 14px;
                        transform: translateX(-50%);
                        bottom: 22%;
                        font-weight: 600;
                        color: #b2e3ff;
                    }
                }
            }
        }

        .map_content {
            width: 100%;
            height: 86%;
            position: relative;
            // background-image: url(../../assets/Home/china.png);
            // background-size: 100% 100%;
            background-repeat: no-repeat;
            .map_bottom {
                width: 80%;
                height: 20%;
                position: absolute;
                left: 10%;
                bottom: 0;
                background-image: url(../../assets/Home/map_bottom.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }

            .map_s {
                // background-color: red;
                width: 96%;
                height: 100%;
                position: absolute;
                left: 2%;

                .map_item1 {
                    width: 90%;
                    padding-bottom: 90%;
                    position: absolute;
                    left: 5%;
                    top: 0;
                    background-image: url(../../assets/Home/earth_1.png);
                    background-size: 100% 100%;
                    z-index: -6;
                    box-sizing: border-box;
                    animation: App-logo-spin 12s linear infinite;
                }

                .map_item2 {
                    background-image: url(../../assets/Home/map_2.png);
                    background-size: 100% 100%;
                    width: 88%;
                    padding-bottom: 88%;
                    position: absolute;
                    left: 6%;
                    top: 0;
                    animation: App-logo-spin1 12s linear infinite;
                    transform-origin: center 50%;
                    z-index: -2;
                    box-sizing: border-box;
                }

                .map_item3 {
                    width: 528px;
                    height: 528px;
                    position: absolute;
                    left: 50%;
                    top: 46%;
                    left: calc(50% - 264px);
                    top: calc(46% - 264px);
                    background-image: url(../../assets/Home/map3.png);
                    background-size: 100% 100%;
                    animation: App-logo-spin1 12s linear infinite;
                    z-index: -5;
                }

                .map_chart {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    left: 0;
                    top: 0;
                    // background-color: pink;
                }
            }

            .factory_img {
                width: 100%;
                height: 100%;

                img {
                    width: 100%;
                }
            }
        }
    }

    .Home_item {
        width: 26%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .item_card {
            width: 100%;
            height: 32%;
            // background-color: aquamarine;
            background-image: url(../../assets/Home/card_bg.png);
            background-size: 100% 100%;
            position: relative;
            box-shadow: 0 0 1rem rgba(27, 101, 248, 0.5);

            .repair_title {
                color: #00e4ff;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }

            .chart {
                position: absolute;
                left: 5%;
                bottom: 2%;
                width: 90%;
                height: 80%;

                // background-color: red;
                .chart_item {
                    position: relative;

                    .round1 {
                        border-radius: 50%;
                        background-color: #00faff;
                        width: 60%;
                        position: absolute;
                        // height: 50%;
                        padding-bottom: 60%;
                        left: 16%;
                        top: 8%;
                    }

                    .round2 {
                        border-radius: 50%;
                        background-color: #04204c;
                        width: 50%;
                        position: absolute;
                        // height: 50%;
                        padding-bottom: 50%;
                        left: 46%;
                        top: 13%;
                        transform: translate(-50%, 0);
                    }

                    .round3 {
                        background-color: #04204c;
                        width: 43%;
                        position: absolute;
                        padding-bottom: 68%;
                        left: 62%;
                        top: 10%;
                        transform: translate(-50%, 0) rotate(8deg);
                    }

                    .round4 {
                        position: absolute;
                        width: 28%;
                        height: 0px;
                        border-top: 1px dashed red;
                        left: 40%;
                        top: 66%;
                    }

                    .round4_1 {
                        border-top: 1px dashed #00faff;
                    }

                    .title {
                        position: absolute;
                        left: 46%;
                        color: white;
                        top: 6%;
                    }

                    .percent {
                        position: absolute;
                        left: 52%;
                        transform: translateX(-50%);
                        color: white;
                        top: 32%;
                        font-weight: 600;
                        font-size: 26px;
                    }

                    .num {
                        position: absolute;
                        color: #00e4ff;
                        left: 44%;
                        top: 70%;
                    }
                }

                .chart_left {
                    width: 50%;
                    height: 100%;

                    float: left;
                }

                .chart_right {
                    float: left;
                    width: 50%;
                    height: 100%;

                    .round1 {
                        background-color: #f85726;
                    }
                }

                .alarm_total {
                    position: absolute;
                    top: 12%;
                    left: 10%;
                    // background-color: red;

                    background-image: url(@/assets/Home/alarm_bg.png);
                    background-size: 100% 100%;
                    width: 34%;
                    padding-bottom: 34%;

                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .alarm_data {
                        position: absolute;
                        width: 100%;
                        // background-color: red;
                        text-align: center;
                        font-size: 32px;
                        font-weight: 600;
                        top: 30%;
                        color: #00e4ff;
                    }

                    .alarm_title {
                        position: absolute;
                        top: 60%;
                        font-size: 18px;
                        font-weight: 600;

                        color: #ffffff;
                    }

                    img {
                        height: 100%;
                        position: absolute;
                        left: 0;
                        top: 0;
                        z-index: 50;
                    }
                }

                .alarm_items {
                    height: 94%;
                    position: absolute;
                    top: 0;
                    right: 2%;
                    width: 50%;
                    display: flex;
                    // align-items: flex-start;
                    flex-direction: column;
                    justify-content: space-around;

                    // background-color: red;
                    .alarm_item {
                        width: 80%;
                        height: 26%;
                        background-image: url(@/assets/Home/menu_bg.png);
                        // background-color: pink;
                        background-size: 100% 100%;
                        // line-height: 1;
                        display: flex;
                        align-items: center;
                        // text-align: center;
                        justify-content: center;
                        color: #00e4ff;
                        font-size: 14px;
                        font-weight: 600;
                        text-indent: 10px;
                        transition: all 0.3s;
                        cursor: pointer;
                    }

                    .alarm_item:hover {
                        transform: scale(1.1);
                    }

                    .alarm_item1 {
                        margin-right: 4%;
                    }
                }
            }

            .chart_table {
                height: 76%;
                overflow: auto;
                bottom: 5%;

                // background-color: #0c1838;
                .alarmTable,
                .deviceTable {
                    width: 100%;

                    td,
                    th {
                        text-align: center;
                        line-height: 22px;
                        height: 22px;
                        color: #aadaf7;
                        font-size: 14px;
                        // background-color: rgba(44, 58, 99) !important ;
                        width: 25%;
                    }

                    th {
                        // background-color: #0c1838;
                        color: #00e4ff !important;
                        // border-bottom: 1px solid black;
                    }

                    tr:hover {
                        background-color: #2350cd;
                        cursor: pointer;
                    }
                }

                .deviceTable {
                    td,
                    th {
                        width: 20%;
                    }
                }

                .noData {
                    position: absolute;
                    color: white;
                    font-size: 14px;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                }
            }

            .card_title {
                color: #00e4ff;
                text-align: center;
                font-size: 18px;
                font-weight: 700;
                margin-top: 3%;
                position: relative;

                .activate {
                    color: #00e4ff;
                    font-size: 18px;
                    font-weight: 700;
                    cursor: pointer;
                }

                .inactive {
                    cursor: pointer;
                    color: #b2e3ff;
                    font-size: 14px;
                    position: absolute;
                    left: 25%;
                }
            }

            .chart_btn {
                background-color: rgba(37, 104, 212, 0.3);
                border: none;
                color: #00e4ff;
                position: absolute;
                left: 7%;
                top: 5%;
                width: 50px;
                height: 24px;
                cursor: pointer;
                border-radius: 2px;
                // z-index: 999;
            }

            .chart_btn:hover {
                background-color: #225c62;
            }
        }

        .item_card::before {
            position: absolute;
            top: 6px;
            left: 6px;
            content: '';
            width: 10px;
            height: 10px;
            border-top: 2px solid #02a6b5;
            border-left: 2px solid #02a6b5;
        }

        .item_card::after {
            position: absolute;
            top: 6px;
            right: 6px;
            content: '';
            width: 10px;
            height: 10px;
            border-top: 2px solid #02a6b5;
            border-right: 2px solid #02a6b5;
        }
    }

    .chat {
        position: fixed;
        background: #000000d4;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        padding: 2% 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        font-size: 14px;

        .item_card {
            width: 100%;
            height: 100%;

            .card_title {
                font-size: 22px;
                letter-spacing: 7px;
            }
        }

        .chat_box {
            position: absolute;
            left: 5%;
            bottom: 2%;
            width: 90%;
            height: 80%;
            padding: 2% 1% 3% 1%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;

            .msgs {
                flex: 1;
                color: #ffffff;
                overflow-y: auto;

                .row {
                    padding: 6px 0;
                }

                .avatar {
                    width: 45px;
                    height: 45px;
                    background-image: url(@/assets/Home/logo.96bf599c.svg);
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    padding: 3px 5px;
                }

                .content {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    padding: 3px 5px;

                    .time {
                        font-size: 12px;
                        padding: 3px 0px;
                        color: #225bac;
                    }

                    .msg {
                        background: #9babc321;
                        color: #33e6ff;
                        padding: 10px;
                        border-radius: 5px;
                        line-height: 1.3;
                    }

                    .tips {
                        background-color: #9babc321;
                        padding: 10px;
                        margin-top: 5px;
                        width: fit-content;
                        border-radius: 5px;

                        ul {
                            list-style-type: disc;
                            padding: 5px 12px;

                            li {
                                line-height: 1.5;
                                cursor: pointer;
                                color: #1ba3ff;
                            }
                        }
                    }
                }

                .msg_left {
                    display: flex;
                    padding-right: 50px;
                }

                .msg_right {
                    justify-content: flex-end;
                    display: flex;
                    padding-left: 50px;

                    .msg {
                        align-self: flex-end;
                        color: #ffffff;
                        background: #2b9cff30;
                    }

                    .time {
                        text-align: right;
                    }
                }
            }

            .input_box {
                textarea {
                    width: 100%;
                    height: 100%;
                    resize: none;
                    color: #ffffff;
                    border: 1px solid #1ba3ff;
                    border-radius: 7px;
                    outline: none;
                    background-color: transparent;
                    box-sizing: border-box;
                    font-size: 16px;
                }

                .btn_enter {
                    position: absolute;
                    bottom: 3px;
                    right: 5px;
                    border-radius: 10px;
                    width: 60px;
                    height: 30px;
                    background-color: #297dff;
                    color: #33e6ff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    box-shadow: 0px 0px 11px 1px white;
                }

                width: 80%;
                align-self: center;
                padding-top: 10px;
                height: 80px;
                position: relative;
            }
        }
    }
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
}
</style>
